<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜品管理</title>
<script type="text/javascript" src="${basePath }js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="${basePath }js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${basePath }css/bootstrap.min.css">

</head>
<!--顶部-->
<body>
<div class="row">
    <div style="float:left;height:60px;background-color: black" class="col-md-4">
        <p style="margin-left: 30px;margin-top: 13px;color: white;font-size: large">
            <img src="${basePath}img/icon.png">
            原地起飞 - 餐厅到店点餐系统</p>
    </div>
    <div style="float:left;background-color:black;height:60px;padding:13px;" class="col-md-4">
        <form class="form-inline" action="" method="post">
            <div class="form-group">
                <input type="text" class="form-control" id="send" style="width: 300px" name="" placeholder="公告">
            </div>
            <button type="submit" class="btn btn-default">发送</button>
            <span style="color:white;">	餐厅管理界面</span>
        </form>

    </div>
    <div style="float:left;background-color:black;height:60px;padding:5px;" class="col-md-4" >
        <p style="color:white;margin:15px">
            <img class="img-circle" src="${basePath}img/h1.png" style="width:30px;height:30px;object-fit:contain;">
            当前用户：【<a title="点击我即可修改信息" style="color:red;" href="${basePath }user/update.do?userId=${usermessage.userId}">
            ${usermessage.userName }</a>】，身份为：${usermessage.roleDO.roleName}
            <a href="${basePath }/OrderSys/pages/login.jsp" style="float:right;margin-right:10px;color: white">退出登录</a>
            <a style="float:right;margin-right:10px;color: white" href="${basePath }/OrderSys/pages/AdminIndex.jsp">回到管理员界面</a>
        </p>
    </div>
</div>
<!--主体-->
<div class="row">

</div>
<!--主体左侧-->
<div class="row col-md-3" >
    <div style="float:left;background-color:#F2F2F2;width:90%;height:650px;">
        <p style="font-size: 25px;margin:15px">
            <img src="${basePath}img/manage.png" style="width:40px;height:40px;">
            运营功能</p>
        <img src="${basePath}img/jie.PNG" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath}OrderSys/admin/SettleOrderPass.jsp" style="color:#01A9DB;margin:10px">顾客结账界面</a>
        <p style="font-size: 25px;margin:15px">
            <img src="${basePath}img/eat.png" style="width:40px;height:40px;">
            餐厅管理</p>
        <img src="${basePath}img/user.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath }user/browseuser.do"
           style="color:#01A9DB;margin:10px" >
            员工管理</a><br>
        <img src="${basePath}img/location.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath}foodtype/findAllFoodType.do" style="color:#01A9DB;margin:10px">菜品管理</a><br>
        <!-- <img src="${basePath}img/run.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="" style="color:#01A9DB;margin:10px">查看经营数据</a> -->
    </div>
</div>
<!--主体右侧-->
<div class="row col-md-9" style="margin-left: 11px">
    <!--上-->
    <div style="background-color:#F2F2F2;height:35px;padding:10px;margin-left:15px;border-radius:5px;margin-top:15px;">
        <a>首页</a>/
        <a style="color: black">管理员</a>/
        <a style="color:#6F6F6F">菜品管理界面</a>
    </div>
    <!--下-->
    <div style="height:480px;margin-left:15px; margin-top:15px;border-radius:5px;border:2px solid #FFD6CC;">
        <div style="background-color:#FFD6CC;height:42px;padding:10px;">
            <p style="color:#881B00;font-size:17px">菜品列表</p>
        </div>
        <div style="margin: 10px;">
            <p class="text-right">如果你需要在系统中添加一名新菜品，请点击右边按钮：
                <button type="button" class="btn btn-success" style="margin:3px">
                <a href="${basePath }OrderSys/admin/AddDishes.jsp" style="color: white">添加菜品</a></button></p>
        </div>
        <div>
            <table class="table table-striped table-hover" style="padding: 10px" id="userInfoTable">
                <tr>
                    <td >菜品编号</td><td>菜品名称</td><td>菜品简介</td><td>菜品价格</td><td>是否推荐</td><td>操作</td>
                </tr>
                <!-- <tr>
                    <td>1</td> <td>川香回锅肉</td><td>彩色鲜香，肥而不腻</td><td>26.5</td><td>特色菜品</td>
                    <td>
                        <img style="height: 20px;width: 20px;margin: 3px" src="${basePath}img/manage.png">
                        <img style="height: 20px;width: 20px;margin: 3px"src="${basePath}img/infor.png" alt="" id="btn1">
                        <img style="height: 20px;width: 20px;margin: 3px"src="${basePath}img/remove.png">
                    </td>
                </tr> -->
                <%! int i = 1; %> 
                <c:forEach items="${listFoodType}" var="foodType">
                    <tr>
                        <td>${foodType.foodtypeId }</td>
                        <td>${foodType.foodtypeName}</td>
                        <td>${foodType.foodtypeIntroduction}</td>
                        <td style="display: none;">${foodType.foodtypeDetail}</td>
                        <td style="display: none;">${foodType.foodtypePicturePath}</td>
                        <td>${foodType.foodtypePrice}</td>
                        <td>${foodType.foodtypeIsrecommend}</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="...">
                                <a class="btn btn-info">修改</a>
                                <button onclick="userInfoDetail(this)" value="<%=i%>" class="btn btn-success" >详情</button>
                                <button onclick="deleteUser(this)" value="${foodType.foodtypeId}" class="btn btn-danger">删除</button>
                            </div>
                            
                        </td>
                    </tr>
                    <% i = i+1; %> 
                </c:forEach>
                <% i = 1; %>
                <a id="deleteUser"></a>
            </table>
            <pg:pager items="${total}" url="${basePath}foodtype/findAllFoodType.do"
                      maxIndexPages="3" maxPageItems="2" scope="request">
                <jsp:include page="../pages/PagerTag2.jsp"></jsp:include>
            </pg:pager>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="userModal" >
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">详细信息</h4>
                </div>
                <div class="modal-body">
                    <div style="background-color:#FFD6CC;height:42px;padding:10px;">
                        <p style="color:#881B00;font-size:15px">菜品详情</p>
                    </div>
                        <img id="userInfoImage" class="img-circle" style="width:150px;height:150px;object-fit:contain;margin-top: 10px;margin-left: 200px" src="${basePath}img/food.png">
                        <div class="caption" style="margin-left: 150px" >
                            <h3 id="foodtypeName"></h3>
                            <h3 id="foodtypeId"></h3>
                        </div>
                        <div class="caption" id="userInfoModal">
                            <h4 style="font-weight: bold;">菜品简介：</h4>
                            <h4 id="foodtypeIntroduction"></h4>
                            <h4 style="font-weight: bold;">菜品描述：</h4>
                            <h4 id="foodtypeDetail"></h4>
                            <h4 style="font-weight: bold;">菜品价格：</h4>
                            <h4 id="foodtypePrice"> </h4>
                        </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
    </div>

</div>

<script>
    window.onload = function(){
        // var btn1 = document.getElementById('btn1');

        // btn1.onclick = function(){
        //     event.cancelBubble = true;
        //     flt.style.display = 'block';
        // }
        console.log("页面加载");
    }
    function userInfoDetail(d){
        console.log("调用点击函数");
        var i=d.value;
        console.log(i);
        var table = document.getElementById("userInfoTable");
        var rows = table.rows;
        var foodtypeId = rows[i].cells[0].innerHTML;
        document.getElementById("foodtypeId").innerText="菜品ID："+foodtypeId;
        var foodtypeName = rows[i].cells[1].innerHTML;
        document.getElementById("foodtypeName").innerText="菜品名称："+foodtypeName;
        
        var foodtypeIntroduction = rows[i].cells[2].innerHTML;
        document.getElementById("foodtypeIntroduction").innerText=foodtypeIntroduction;
        
        var foodtypeDetail = rows[i].cells[3].innerHTML;
        document.getElementById("foodtypeDetail").innerText=foodtypeDetail;
        var foodtypePicturePath = rows[i].cells[4].innerHTML;

        var foodtypePrice = rows[i].cells[5].innerHTML;
        document.getElementById("foodtypePrice").innerText=foodtypePrice+"（元）";

        var foodtypeIsrecommend = rows[i].cells[6].innerHTML;

        
        
        var image=document.getElementById("userInfoImage");
        // image.setAttribute("src",foodtypePicturePath);
        image.setAttribute("src","http://localhost:8080/fileserver/202007312241103733410932913566260957.jpg");
        jQuery("#userModal").modal('show');
        
    } 
    function deleteUser(userId){
        if(!confirm("是否删除该菜品？")) return;
        var id = userId.value;
        var url="${basePath}foodtype/deleteFoodType.do?id="+id;
        var a=document.getElementById("deleteUser");
        a.setAttribute("href",url);
        a.click();  
    }
</script>

</body>
</html>